<template>
  <div class="user_add_or_update">
    <el-dialog :visible.sync="visible"
               append-to-body
               @close="closeDataForm"
               :title="title"
               width="90%"
               style="">
      <grid-layout :layout.sync="gadgets"
                   :col-num="12"
                   :row-height="10"
                   :is-draggable="dashbordDefaultSetting.allowDragging"
                   :is-resizable="dashbordDefaultSetting.allowResizing"
                   :responsive="dashbordDefaultSetting.responsive"
                   :is-mirrored="false"
                   :vertical-compact="true"
                   :margin="[10, 10]"
                   :use-css-transforms="true"
                   style="background-color: #f1f4f5;">
        <grid-item v-for="(item,index) in gadgets"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i"
                   :static="item.static"
                   @container-resized="containerResizedEvent"
                   @resized="resizedEvent"
                   @mouseenter.native="mouseEnterModule(index)"
                   @mouseleave.native="mouseLeaveModule(index)">
          <div v-if="editMode&&item&&item.showSetting&&item.showSetting === 'show'"
               style="height:20px;lineHeight:20px;position:absolute;top:2px;right:2px;z-index:2020;background:#ffffff;">
            &nbsp;
            <i @mouseenter="moveComponent(true)"
               @mouseleave="moveComponent(false)"
               :title="$t('custom.move')"
               class="el-icon-rank"
               v-if="!(item.com==='pageheadergadget')"
               style="cursor:pointer;"></i>&nbsp;
            <!-- v-if="$hasPermission('sys:tenant:model:allowtomanage:report:temmodel')" -->
            <i v-if="hasPageHeaderPer(item.com)"
               @click="editComponent(item.i,item)"
               :title="$t('custom.edit')"
               class="el-icon-s-operation"
               style="cursor:pointer;"></i>&nbsp;
            <i @click="closeComponent(item.i)"
               :title="$t('custom.remove')"
               v-if="!(item.com==='pageheadergadget')"
               class="el-icon-close"
               style="cursor:pointer;"></i>&nbsp;
          </div>
          <component :editMode='editMode'
                     :gadgetInfo='item'
                     @dragChanged='gadgetDragChanged'
                     ref="gadgets"
                     @removed='gadgetRemoved'
                     :id='item.i'
                     :pageId='pageId'
                     :presentMode="true"
                     :presentModeItem="true"
                     :businessType="''"
                     :reportNameForPage="''"
                     :is="item.com"></component>
        </grid-item>
      </grid-layout>
      <template slot="footer">
        <el-button @click="closeDataForm"
                   size="small">{{ $t('cancel') }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinDashboardViewModule from '@/mixins/dashboard-view-module'
import mixinViewModule from '@/mixins/crud-view-module'

export default {
  props: {

  },
  mixins: [mixinDashboardViewModule, mixinViewModule],
  data () {
    return {
      visible: false,
      pageId: '',
      title: ''

    }
  },
  computed: {

  },
  mounted () {

  },
  destroyed () { },
  watch: {
    visible (val) {
      if (!val) {

      }
    }

  },
  methods: {
    init () {
      this.$nextTick(() => {
        this.isInDesktop = true
        this.getDashboardLayout()
      })
      this.visible = true
    },
    getInfo () {

    },
    closeDataForm () {
      this.pageId = ''
      this.title = ''
      this.gadgets = []
      this.visible = false
    }

  }
}
</script>

<style lang="scss">
.user_add_or_update {
  .el-form-item__label {
    padding: 0 13px 0 0;
  }
  .el-dialog {
    margin-top: 10vh !important;
  }
  .el-dialog__body {
    overflow: inherit;
    height: 80vh;
    padding: 6px !important;
  }
  .dialog-content {
    margin-top: 10vh !important;
  }
}
</style>
<style scoped>
</style>
